<template lang="pug">
  v-container
    v-card
      v-toolbar(color="purple darken-4" dark dense)
        v-toolbar-title 基本信息
        v-spacer
        v-toolbar-items
          v-btn(text @click="back") 返回
          v-btn(text @click="reset") 重置
          v-btn(text @click="save") 保存
      v-form(ref="form")
        v-container(grid-list-xl)
          v-layout(wrap)
            v-flex(xs12 md6)
              v-text-field(
                label="名称"
                v-model="data.name"
                :rules="[rules.required]"
              )
            v-flex(xs12 md6)
              v-text-field(
                label="物品编码"
                v-model="data.product_model_number"
              )
            v-flex(xs12 md6 v-show="!data.id")
              v-text-field(
                label="初始数量"
                v-model="data.init_quantity"
                :rules="[rules.required]"
              )
            v-flex(xs12 md6)
              v-text-field(
                label="单位/市场价"
                v-model="data.marking_price_per_unit"
                :rules="[rules.required]"
              )
            v-flex(xs12 md6)
              v-text-field(
                label="单位/购入价"
                v-model="data.bid_price_per_unit"
                :rules="[rules.required]"
              )
            v-flex(xs12 md6)
              v-combobox(
                label="主类"
                ref="category"
                item-text="name"
                item-value="id"
                :rules="[rules.required]"
                :items="primaryCategories"
                @input="syncMandatoryPivot('category')"
                v-model="data.category")
            v-flex(xs12 md6)
              v-combobox(
                ref="sub_category"
                label="副类"
                item-text="name"
                item-value="id"
                :rules="[rules.required]"
                :items="subCategories"
                @input="syncMandatoryPivot('sub_category')"
                v-model.sync="data.sub_category")
            v-flex(xs12 md6)
              v-combobox(v-model="data.brand"
                label= "品牌"
                item-text="name"
                item-value="id"
                :items="assetBrands"
                @input="syncPivotId('brand')"
                :rules="[rules.required]"
                :success-messages="isNew('brand')"
              )
            v-flex(xs12 md6)
              v-combobox(v-model="data.affiliation"
                label= "归属"
                item-text="name"
                item-value="id"
                :items="assetAffiliations"
                :rules="[rules.required]"
                @input="syncPivotId('affiliation')"
                :success-messages="isNew('affiliation')"
              )
            v-flex(xs12 md6)
              v-combobox(v-model="data.keeper"
                label= "保管人"
                item-text="name"
                item-value="id"
                :items="assetKeepers"
                :rules="[rules.required]"
                @input="syncPivotId('keeper')"
                :success-messages="isNew('keeper')"
              )
            v-flex(xs12 md6)
              v-combobox(v-model="data.vendor"
                label= "供应商"
                item-text="name"
                item-value="id"
                :items="assetVendors"
                @input="syncPivotId('vendor')"
                :success-messages="isNew('vendor')"
              )
            v-flex(xs12 md6)
              v-combobox(v-model="data.location"
                label= "仓库"
                item-text="name"
                item-value="id"
                :items="assetLocations"
                @input="syncPivotId('location')"
                :success-messages="isNew('location')"
              )
            v-flex(xs12 md12)
              v-textarea(label="简介" v-model="data.description")
</template>

<script lang="ts">
  import Vue from 'vue'
  import AssetFormMixin from '../mixins/AssetFormMixin'
  import {mapGetters, mapState, mapActions} from 'vuex'

  export default Vue.extend({
    name: 'AssetStockForm',
    mixins: [AssetFormMixin],
    methods: {
      ...mapActions('asset', { fetchAssetMeta: 'fetchAssetMeta' }),
      ...mapActions('assetStock', { store: 'save' }),
      active() {
        console.log('hello active form')
      },
    },
  })
</script>